<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin:0;padding:0;}	
		
		.cont{
			width:930px;
			height:120px;
			background-color:#ccc;
			border:1px solid red;
			margin:0 auto;
		}
		 img{
			width:200px;
			height:100px;
			display:block;
			
			
		}
		.box{
			float:left;
			position:relative;
			border:10px solid pink;
			margin-left:10px;
		}
		.text{
				text-align:center;
				font-size:20px;
				position:absolute;
				bottom:0;
				width:100%;
				background-color:rgba(0,0,0,0.5);
				color:white;
				display: none;

		}
		.box:hover .text{
						display:block;
		}

	</style>
</head>
<body>
	<div class="cont">
		<div class="box">
			<img src="./timg.jpeg" alt="">
			<div class="text">这是橙子</div>
		</div>
		<div class="box">
			<img src="./timg.jpeg" alt="">
			<div class="text">这是橙子</div>
		</div>
		<div class="box">
			<img src="./timg.jpeg" alt="">
			<div class="text">这是橙子</div>
		</div>
		<div class="box">
			<img src="./timg.jpeg" alt="">
			<div class="text">这是橙子</div>
		</div>
	</div>
	
</body>
</html>